<template>
    <div>
        <el-progress :percentage="p" v-bind="$attrs"/>
    </div>
</template>

<script setup lang="ts">
  
  let props = defineProps({
    percentage: {
        type: Number,
        default: 0
    },
    isAnimation: {
        type: Boolean,
        default: false
    },
    timer: {
        type: Number,
        default: 3000
    }
  })

  let p = ref(0)

  onMounted(() => {
    if (props.isAnimation) {
        let t = Math.ceil(props.timer/props.percentage)
        let aTimer = setInterval(function(){
            p.value += 1
            if (p.value >= props.percentage) {
                p.value = props.percentage
                clearInterval(aTimer)
            }
        }, t)
    } else{
        p.value = props.percentage
    }
  })
</script>

<style scoped>
</style>
